<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
</body>
<script>
    //（1）当函数体有一个参数，有返回值的时候
    var foo = function(v) {
            return v;
        }
        // ES6写法
    var foo1 = v => v; //【@】箭头函数
    var sky = foo1("a");
    //（2）当函数体没有参数，有返回值的时候
    var foo2 = function() {
        return 'love';
    };
    // ES6写法
    var foo3 = () => "love"; //【@】箭头函数
    var moon = foo3();
    //（3） 当函数体有多个参数，有返回值的时候
    var lots = function(v1, v2) {
            return v1 + v2;
        }
        // ES6写法
    var lots1 = (v1, v2) => v1 + v2; //【@】箭头函数
    var fly = lots1("1", "2");
    //（4）当函数体有多个参数没有返回值的时候
    var ends = function(v1, v2) {
        console.log(v1);
        console.log(v2);
    };
    // ES6写法
    //箭头函数
    var ends1 = (v1, v2) => {
        console.log(v1); //1
        console.log(v2); //2
    };
    var mao = ends1(1, 2);
    //（5）箭头函数的this指向问题
    var person = {
        name: 'tom',
        getName: function() {
            return this.name;
        }
    };
    var name = 11;
    // ES6写法
    const person1 = {
        name: 'tom',
        getName: () => this.name
    };
    console.log(person1.getName()); //11
    //下面是等价的编译结果。原因：应该继承的是父执行上下文里面的this，切忌是【父执行上下文！！！】
    // 这样就很多箭头函数中的指向不明确就迎刃而解了。此时就是person1的环境window
    var person = {
        name: 'tom',
        getName: function getName() {
            return undefined.name;
        }
    };
    var a = 111;

    function test2() {
        this.a = 22;
        let b = () => {
            console.log(this.a)
        }
        b();
    }
    var x = new test2(); //输出22
    // ES6写法
    //【settimeout函数和箭头函数this】
    var obj = {
        name: 'name',
        foo: function() {
            console.log(this); // Object {name: "name"}
            setTimeout(function() {
                console.log(this); // Window
            }, 1000);
        },
        foo2: function() {
            console.log(this); // Object {name: "name"}
            setTimeout(() => {
                console.log(this); // Object {name: "name"}
            }, 2000);
        }
    }
</script>

</html>